<template>
	<view>
		<view class="item" :class="item.status?'sygqClass':''">
			<div class="wrapper press-down-active">
				<div class="top">
					<view class="Media Media--center" style="height: 75px; padding: 7px 0 6px; color: #ca9c5c;">
						<view :class="item.status?'borderRight':''" style="width:100px;border-right: 1px dashed #E9B4B4;text-align: center;">
							<view style="width:100px;">
								<view class="text-xl" style="font-weight: bold; color: #a1682a;font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 600;font-size: 18px;color: #EB2E29;line-height: 25px;margin-bottom: 10px;"><text class="text-xs">&yen;</text>{{item.coupon_amount}}</view>
							</view>
							<view class="text-xs" style="width:100px;font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 400;font-size: 12px;color: #EB2E29;line-height: 16px;">
								满{{item.condition_amount}}可用
							</view>
						</view>
						<view style="width: 100%;padding: 0 20px 0 13px;">
							<view class="Grid Grid--center text-sm" style="font-weight: bold;margin-bottom: 8px;">
								<view style="font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 600;font-size: 16px;color: #EB2E29;line-height: 22px;">{{item.coupon_title}}</view>
								<view class="Media-body">
									<view v-if="!item.status" class="Grid Grid--center Grid--justifyFlexEnd">
										<view style="background-color: #eb2e29; color: #fff; padding: 4px 15px; border-radius: 12px;font-weight: 400;font-size: 12px;color: #FFFFFF;" @click="goHome">{{statusList[item.status]}}</view>
									</view>
								</view>
							</view>
							<view class="text-xs" style="font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 400;font-size: 12px;color: #999999;line-height: 16px;">有效期：{{item.expire_time}}</view>
						</view>
					</view>
				</div>
				<span class="dash-line"></span>
				<div class="bottom">
					<view class="Grid Grid--center" style="height: 25px; padding: 0 16px; color: #ca9c5c;font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 400;font-size: 12px;color: #A47A7A;">
						所属分析师：
						<u-avatar :src="item.sale_img" size="15" style="margin-right: 5px;"></u-avatar>{{item.sale_name}}
					</view>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		parseQuery
	} from '@/utils/index.js'
	import {
		followList
	} from '@/service/index.js'
	export default {
		name: 'Item',
		props: {
			item: {
				type: Object,
				default: () => []
			},
			// 当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			}
		},
		data() {
			return {
				statusList: [
					'去使用',
					'已使用',
					'已过期'
				]
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		onload () {
		},
		mounted() {
			console.log(this.currentIndex, 'currentIndex>>>')
		},
		destroyed() {

		},
		onHide() {},
		methods: {
			// 跳转到用户首页
			goHome() {
				if (this.item.status) return
				this.$nextTick(()=>{
					const {
						appid
					} = parseQuery()
				
					let http = `${window.location.origin}/user/#/?appid=${appid}&user_id=${this.item.user_id}&other=${new Date().getTime()}`
					window.location.href = http
				})
				
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.item {
		margin-top: 15px;
		position: relative;
		padding: 0 15px;
	}
	.wrapper {
	  position: relative;
	  width: 100%;
	  height: 100px;
	  /*box-shadow: 0rpx 4rpx 8rpx -2rpx rgba(0,0,0,0.03), 0rpx 8rpx 12rpx -2rpx rgba(0,0,0,0.06);*/
	  border-radius: 12px 12px 12px 12px;
	  margin: 0 auto;
	  filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
	& div{
	    width: 100%;
	  }
	
	.dash-line {
	    position: absolute;
	    width: calc(100% - 24px);
		left: 50%;
		margin-left: calc((100% - 24px) / -2);
	    border-bottom: 2px dotted #e7ca9e;
		display: none;
	  }
	
	
	& .top {
	    background:  radial-gradient(circle at left bottom, transparent 8px, #FFF7F7 0) left bottom , radial-gradient(circle at right bottom, transparent 8px, #FFF7F7 0) right bottom;
	    background-size: 60% 100%;
	    background-repeat: no-repeat;
	    color: white;
	    width: 100%;
	    height: 75px;
	    border-radius: 12px 12px 0 0px;
	  }
	& .bottom {
	    background: radial-gradient(circle at top left, transparent 8px, #FFE5E5 0%) top left ,radial-gradient(circle at right top, transparent 8px, #FFE5E5 0) right top;
	    background-size: 60% 100%;
	    background-repeat: no-repeat;
	    width: 100%;
	    height: 25px;
	    color: white;
	    border-radius: 5px;
	    border-radius: 0 0 12px 12px;
	  }
	}
	.sygqClass{
		& .top {
			background:  radial-gradient(circle at left bottom, transparent 8px, #D0D0D0 0) left bottom , radial-gradient(circle at right bottom, transparent 8px, #D0D0D0 0) right bottom;
		}
		& .bottom {
			background: radial-gradient(circle at top left, transparent 8px, #B8B8B8 0%) top left ,radial-gradient(circle at right top, transparent 8px, #B8B8B8 0) right top;
		}
		view{
			color: #fff !important;
			
		}
		.borderRight{
			border-right: 1px dashed #fff !important;
		}
	}
</style>